```vue
<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onChange="change"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script setup lang="ts">
import {
  Editor,
  Toolbar
} from "@wangeditor/editor-for-vue";
import {
  onBeforeUnmount,
  ref,
  shallowRef,
  watch
} from "vue";
import api from '@/api/upload';
import { IDomEditor } from '@wangeditor/editor';

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef<IDomEditor>();
const toolbarConfig: Record<string, any> = {};
const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {
    uploadImage: {
      fieldName: "your-custom-name",
      maxFileSize: 1 * 1024 * 1024,
      maxNumberOfFiles: 10,
      allowedFileTypes: ["image/*"],
      timeout: 5 * 1000,

      // 自定义上传
      async customUpload(file: File, insertFn: (url: string, alt: string) => void) {
        const url = await api.uploadImg({
          file
        });
        const alt = "";
        insertFn(url, alt);
      }
    }
  }
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 创建实例
const handleCreated = (editor: IDomEditor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  toolbarConfig.excludeKeys = ["group-video"]; // 移除上传视频
};

const props = defineProps({
  modelValue: {
    default: ""
  },

  // 模式
  mode: {
    type: String,
    default: "default"
  }
});

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

// 内容 HTML
const valueHtml = ref("");

// 更改内容
function change() {
  emit("update:modelValue", valueHtml.value);
}

watch(
  () => props.modelValue,
  (val) => {
    valueHtml.value = val;
  },
  {
    immediate: true
  }
);
</script>

<style lang="scss" scoped>
.box {
  border: 1px solid #ccc;
}

::v-deep {
  .w-e-full-screen-container {
    z-index: 999;
  }
}
</style>
```
